<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>订单开始时间</span>
              <el-date-picker
                class="tel-value"
                v-model="params_list.start"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择订单开始时间"
                align="right">
              </el-date-picker>
            </div>
            <div class="item-inline">
              <span>订单结束时间</span>
              <el-date-picker
                class="tel-value"
                v-model="params_list.end"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择订单结束时间"
                align="right">
              </el-date-picker>
            </div>
            <div class="item-inline">
              <span>店铺名称</span>
              <el-input class="tel-value" v-model="params_list.name" placeholder="请输入店铺名称"></el-input>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          保障订单
          <div class="add-new">
            <el-button class="jx-btn" type="primary" :loading="boo.isExport" @click="exportRow">{{boo.isExport ? '请稍后……' : '导出'}}</el-button>
          </div>
        </div>
        <el-table :data="order" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="店铺名称" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="no" label="订单编号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="time" width="150" label="订单时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="type" label="申请类型" align="center">
          </el-table-column>
          <el-table-column prop="serve" label="服务类型" align="center" >
          </el-table-column>
          <el-table-column prop="order" label="保单号" align="center" width="90">
          </el-table-column>
          <el-table-column prop="time" label="保障时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="sum" label="保障金额" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.sum}}万
            </template>
          </el-table-column>
          <el-table-column prop="price" label="保费" align="center">
          </el-table-column>
        </el-table>
        <div v-if="order.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 服务单 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">服务单详情</span>
      </div>
      <div class="jx-detail">
        <div class="title">服务详情</div>
        <div class="detail-item">
          <div class="item_2">
            <div class="list">
              <span>开通时间：</span>
              <div class="right">
                <span>{{currentRow.starttime || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>到期时间：</span>
              <div class="right">
                <span>{{currentRow.endtime || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>当前服务状态：</span>
              <div class="right">
                <span>{{currentRow.status || '--'}}</span>
              </div>
            </div>
          </div>
          <div class="item_2">
            <div class="list">
              <span>保证金方式：</span>
              <div class="right">
                <span>{{currentRow.type || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>保证金金额：</span>
              <div class="right">
                <span>{{currentRow.sum || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>保障金额：</span>
              <div class="right">
                <span>{{currentRow.bsum || '--'}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item">
            <div class="title">服务内容</div>
            <div class="jx-table">
              <el-table :data="currentRow.list" border style="width: 100%" v-loading="boo.serveloading">
                <el-table-column type="index" label="序列" width="60" align="center">
                </el-table-column>
                <el-table-column prop="name" label="服务名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="no" label="服务商品编号" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="content" label="商品清单" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="price" label="服务价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="bprice" label="出售价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.status == 1 ? '正常' : '已终止服务'}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button @click="hiddenserveRow(scope.row)" type="text" size="small">{{scope.row.status == 1 ? '终止服务' : '恢复服务'}}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import order from 'static/json/merchant/order.json'
	export default {
		data() {
			return {
        boo: {
          loading: false,
          showDialog: false,
          isExport: false,
        },
        other: {
          allRow: 1,
        },
        order: order,
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
          start: '',
          end: '',
          name: '',
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){},
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
      },
      exportRow(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 90px
</style>
